<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">年级科目管理</text>
      <text class="page-subtitle">点击年级可编辑对应科目</text>
    </view>
    
    <!-- 年级学科列表 -->
    <scroll-view scroll-y class="grade-list">
      <view 
        class="grade-card" 
        v-for="grade in gradeList" 
        :key="grade.id"
        @click="openEditDialog(grade)"
      >
        <view class="grade-header">
          <text class="grade-name">{{grade.grade_name}}</text>
          <uni-icons type="arrowright" size="20" color="#999"></uni-icons>
        </view>
        <view class="subject-list">
          <text 
            class="subject-tag" 
            v-for="(subject, index) in grade.subjects.split(',')" 
            :key="index"
            :style="{backgroundColor: getSubjectColor(subject)}"
          >
            {{subject}}
          </text>
          <text class="empty-tip" v-if="!grade.subjects">暂无科目</text>
        </view>
      </view>
    </scroll-view>
    
    <!-- 编辑弹窗 -->
    <uni-popup ref="editPopup" type="dialog" class="subject-dialog">
      <view class="dialog-content">
        <view class="dialog-header">
          <text class="dialog-title">编辑 {{currentGrade.grade_name}} 科目</text>
          <uni-icons 
            type="close" 
            size="20" 
            color="#999" 
            @click="closeEditDialog"
          ></uni-icons>
        </view>
        
        <view class="dialog-body">
          <!-- 已选科目 -->
          <view class="section">
            <text class="section-title">已选科目</text>
            <view class="subject-grid">
              <view 
                class="subject-item selected"
                v-for="subject in selectedSubjects"
                :key="subject"
                @click="removeSubject(subject)"
                :style="{backgroundColor: getSubjectColor(subject)}"
              >
                <text class="subject-name">{{subject}}</text>
                <uni-icons type="close" size="16" color="#fff"></uni-icons>
              </view>
              <view class="empty-tip" v-if="selectedSubjects.length === 0">
                暂无已选科目
              </view>
            </view>
          </view>
          
          <!-- 可选科目 -->
          <view class="section">
            <text class="section-title">可选科目</text>
            <view class="subject-grid">
              <view 
                class="subject-item available"
                v-for="subject in availableSubjects"
                :key="subject"
                @click="addSubject(subject)"
                :style="{backgroundColor: getSubjectColor(subject)}"
              >
                <text class="subject-name">{{subject}}</text>
                <uni-icons type="plus" size="16" color="#fff"></uni-icons>
              </view>
            </view>
          </view>
        </view>
        
        <view class="dialog-footer">
          <button class="btn cancel" @click="closeEditDialog">取消</button>
          <button class="btn confirm" @click="submitSubjects">保存</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { globalVariable } from '../../configMy.js'

export default {
  data() {
    return {
      gradeList: [],
      allSubjects: ['语文', '数学', '英语', '物理', '化学', '生物', '历史', '地理', '政治'],
      selectedSubjects: [],
      currentGrade: {
        id: null,
        grade_name: '',
        subjects: ''
      },
      subjectColors: {
        '语文': '#FF6B81',
        '数学': '#4A8CFF',
        '英语': '#FFA500',
        '物理': '#9B59B6',
        '化学': '#2ECC71',
        '生物': '#1ABC9C',
        '历史': '#E74C3C',
        '地理': '#3498DB',
        '政治': '#F39C12'
      }
    }
  },
  computed: {
    availableSubjects() {
      return this.allSubjects.filter(subject => !this.selectedSubjects.includes(subject))
    }
  },
  onLoad() {
    this.fetchGradeSubjects()
  },
  methods: {
    getSubjectColor(subject) {
      return this.subjectColors[subject] || '#4A8CFF'
    },
    async fetchGradeSubjects() {
      try {
        const res = await uni.request({
          url: globalVariable + '/getSubject',
          method: 'GET'
        })
        
        if (res.data.status === 1) {
          this.gradeList = res.data.data
        } else {
          uni.showToast({
            title: res.data.message,
            icon: 'none'
          })
        }
      } catch (error) {
        uni.showToast({
          title: '获取数据失败',
          icon: 'none'
        })
        console.error(error)
      }
    },
    openEditDialog(grade) {
      this.currentGrade = { ...grade }
      this.selectedSubjects = grade.subjects ? grade.subjects.split(',') : []
      this.$refs.editPopup.open()
    },
    closeEditDialog() {
      this.$refs.editPopup.close()
    },
    addSubject(subject) {
      if (!this.selectedSubjects.includes(subject)) {
        this.selectedSubjects.push(subject)
      }
    },
    removeSubject(subject) {
      this.selectedSubjects = this.selectedSubjects.filter(item => item !== subject)
    },
    async submitSubjects() {
      const subjectsString = this.selectedSubjects.join(',')
      
      try {
        const res = await uni.request({
          url: globalVariable + '/updateSubject?grade='+this.currentGrade.grade_name+"&subject="+subjectsString,
          method: 'POST',
        })
        
        if (res.data.status === 1) {
          uni.showToast({
            title: '更新成功',
            icon: 'success'
          })
          this.fetchGradeSubjects()
          this.closeEditDialog()
        } else {
          uni.showToast({
            title: res.data.message,
            icon: 'none'
          })
        }
      } catch (error) {
        uni.showToast({
          title: '更新失败',
          icon: 'none'
        })
        console.error(error)
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 0;
  min-height: 100vh;
  background-color: #f8f9fa;
}

/* 页面标题样式 */
.page-header {
  padding: 30rpx 30rpx 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  
  .page-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 10rpx;
  }
  
  .page-subtitle {
    font-size: 26rpx;
    color: #999;
  }
}

/* 年级卡片样式 */
.grade-list {
  height: calc(100vh - 140rpx);
  padding: 20rpx;
  box-sizing: border-box;
  
  .grade-card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
    
    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
    }
    
    .grade-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .grade-name {
        font-size: 34rpx;
        font-weight: 600;
        color: #333;
      }
    }
    
    .subject-list {
      display: flex;
      flex-wrap: wrap;
      gap: 12rpx;
      min-height: 40rpx;
      
      .subject-tag {
        background-color: #4a8cff;
        color: #fff;
        padding: 8rpx 24rpx;
        border-radius: 50rpx;
        font-size: 26rpx;
        box-shadow: 0 2rpx 8rpx rgba(74, 140, 255, 0.2);
      }
      
      .empty-tip {
        font-size: 26rpx;
        color: #ccc;
      }
    }
  }
}

/* 编辑弹窗样式 */
.subject-dialog {
  .dialog-content {
    width: 90vw;
    max-width: 700rpx;
    background-color: #fff;
    border-radius: 24rpx;
    overflow: hidden;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
    animation: dialogFadeIn 0.3s ease;
    
    .dialog-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 1rpx solid #f0f0f0;
      
      .dialog-title {
        font-size: 34rpx;
        font-weight: 600;
        color: #333;
      }
    }
    
    .dialog-body {
      padding: 0 30rpx;
      max-height: 70vh;
      overflow-y: auto;
      
      .section {
        margin: 30rpx 0;
        
        .section-title {
          font-size: 28rpx;
          color: #666;
          margin-bottom: 20rpx;
          display: block;
        }
        
        .subject-grid {
          display: flex;
          flex-wrap: wrap;
          gap: 16rpx;
          
          .subject-item {
            display: flex;
            align-items: center;
            padding: 12rpx 24rpx;
            border-radius: 50rpx;
            transition: all 0.2s ease;
            
            .subject-name {
              font-size: 26rpx;
              color: #fff;
              margin-right: 8rpx;
            }
            
            &.selected {
              &:active {
                transform: scale(0.95);
                opacity: 0.8;
              }
            }
            
            &.available {
              opacity: 0.7;
              
              &:active {
                transform: scale(0.95);
                opacity: 1;
              }
            }
          }
          
          .empty-tip {
            font-size: 26rpx;
            color: #ccc;
            width: 100%;
            text-align: center;
            padding: 20rpx 0;
          }
        }
      }
    }
    
    .dialog-footer {
      display: flex;
      padding: 20rpx 30rpx;
      border-top: 1rpx solid #f0f0f0;
      justify-content: flex-end;
      gap: 20rpx;
      
      .btn {
        margin: 0;
        padding: 0 40rpx;
        height: 70rpx;
        line-height: 70rpx;
        font-size: 28rpx;
        border-radius: 35rpx;
        transition: all 0.2s ease;
        
        &:active {
          opacity: 0.8;
        }
        
        &.cancel {
          background-color: #f5f5f5;
          color: #666;
        }
        
        &.confirm {
          background-color: #4a8cff;
          color: #fff;
        }
      }
    }
  }
}

/* 弹窗动画 */
@keyframes dialogFadeIn {
  from {
    opacity: 0;
    transform: translateY(50rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>